body {
    background-image: url(/images/starfield.png);
    background-size: contain;
    font-family: 'Verdana', sans-serif;
    display: grid;
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: 250px 500px 15%
}

.purpletext {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    font-size: 4em;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #f6f1ff;
    -webkit-text-stroke: 1px #fbdfff;
    opacity: 0;
    animation-name: flash;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: 0.40s;
    animation-timing-function: ease-in;
}

@keyframes flash{
    0%{
    color: #f1c8ff;
    -webkit-text-stroke: 1px #eb9fff;
    text-shadow: 0 0 0;
    opacity: 0;
    }
    25%{
    color: #fbf4ff;
    -webkit-text-stroke: 1px #fce4ff;
    text-shadow: 0 0 30px #f7cfff;
    opacity: 1;
    }
    100%{
    color: #f1c8ff;
    -webkit-text-stroke: 1.5px #eb9fff;
    text-shadow: 0 0 0;
    opacity: 1;
    }
}

@keyframes zoom{
    0%{
        grid-column-start: 2;
        grid-row-start: 2;
        opacity: 1;
        transform: translate(350px, -100px);
        max-width: 1%;
        max-height: 1%;
    }
    100%{
        grid-column-start: 2;
        grid-row-start: 2;
        opacity: 1;
        transform: translate(-170px, -70px);
        max-width: 300%;
        max-height: 300%;
    }
}

@keyframes trailing{
    0%{
    opacity: 0.75;
    grid-column-start: 2;
    grid-row-start: 2;
    width: 250px;
    height: 500px;
    clip-path: polygon(100% 0%, 100% 0%, 100% 0%);
    transform: translate(102px, -100px);
    }
    100%{
    opacity: 0.75;
    grid-column-start: 2;
    grid-row-start: 2;
    width: 250px;
    height: 500px;
    clip-path: polygon(100% 0%, 30% 50%, 0% 30%);
    transform: translate(102px, -100px);
    }
}

@keyframes buttonappear{
    0%{
    opacity: 0;
    cursor: default;
    }
    100%{
    opacity: 1;
    cursor: pointer;
    }
}

.shipcontainer {
    display: grid;
    grid-template-columns: 167px 166px 167px;
    grid-template-rows: 167px 166px 167px;
    grid-column-start: 2;
    grid-row-start: 2;
}

.ship {
    max-width: 300%;
    max-height: 300%;
    grid-column-start: 2;
    grid-row-start: 2;
    transform: translate(-170px, -70px);
    animation-fill-mode: forwards;
    opacity: 0;
    animation-name: zoom;
    animation-duration: 0.5s;
    animation-delay: 1.40s;
    animation-timing-function: ease-in;
}

.shiptrail {
    grid-column-start: 2;
    grid-row-start: 2;
    width: 250px;
    height: 500px;
    background-color: greenyellow;
    clip-path: polygon(100% 0%, 30% 50%, 0% 30%);
    transform: translate(102px, -100px);
    opacity: 0;
    animation-fill-mode: forwards;
    animation-name: trailing;
    animation-duration: 0.5s;
    animation-delay: 1.40s;
    animation-timing-function: ease-in;
}

.gobutton {
    grid-column-start: 2;
    grid-row-start: 3;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    background-color: yellow;
    color: purple;
    width: 150px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform: translate(0px, 75px);
    border: 3px solid;
    transition: 50ms;
    animation-fill-mode: forwards;
    opacity: 0;
    cursor: default;
    animation-name: buttonappear;
    animation-duration: 1.5s;
    animation-delay: 1.40s;
}

.gobutton:hover{
    background-color: lightyellow;
    border: 1.5px solid;
    border-color: mediumpurple;
    scale: 1.1;
}